<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI聊天助手</title>
  <!-- 引入Markdown渲染库 -->
  <script src="lib/marked.min.js"></script>
  <script src="lib/highlight.min.js"></script>
  <link rel="stylesheet" href="lib/atom-one-dark.min.css">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- 通知组件 -->
  <div id="notification" class="notification">
    <span class="notification-icon">✨</span>
    <span class="notification-content"></span>
    <button class="notification-close">&times;</button>
  </div>

  <!-- 模型选择弹窗 -->
  <div id="model-select-modal" class="model-select-modal">
    <div class="model-select-title">选择模型 (Ctrl+Alt+T)</div>
    <div class="model-select-search">
      <input type="text" id="model-select-input" class="model-select-input" placeholder="输入模型名称搜索...">
    </div>
    <ul id="model-select-list" class="model-select-list">
      <!-- 模型列表将通过JavaScript动态生成 -->
    </ul>
  </div>
  <div class="container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2>聊天记录</h2>
        <button id="new-chat-btn" class="button">新对话</button>
      </div>
      <div class="sidebar-content">
        <ul id="chat-list" class="chat-list">
          <!-- 聊天记录列表 -->
        </ul>
      </div>
      <div class="sidebar-footer">
        <button id="settings-btn" class="button button-secondary">设置</button>
        <button id="clear-all-btn" class="button button-danger" title="清除所有聊天记录">清空</button>
        <div class="dropdown">
          <button id="help-btn" class="button button-secondary">帮助</button>
          <div class="dropdown-menu">
            <div class="dropdown-item" id="shortcuts-menu-item">快捷键</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div id="empty-state" class="empty-state">
        <div class="empty-state-icon">💭</div>
        <div class="empty-state-text">开始一个新的对话，或从左侧选择历史记录</div>
        <button id="start-chat-btn" class="button">开始新对话</button>
        <div class="shortcut-hints">
          <div class="shortcut-hint">新建对话: <kbd>Ctrl</kbd> + <kbd>N</kbd></div>
          <div class="shortcut-hint">切换模型: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></div>
          <div class="shortcut-hint">模型选择: <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd></div>
        </div>
      </div>

      <div id="chat-container" style="display: none; flex-direction: column; height: 100%;">
        <div class="chat-header">
          <h2 id="chat-title">新对话</h2>
          <div class="model-selector">
            <select id="model-select">
              <!-- 模型选项 -->
            </select>
          </div>
        </div>
        <div id="chat-messages" class="chat-messages">
          <!-- 消息内容 -->
        </div>
        <div class="chat-input">
          <div class="input-container">
            <textarea id="message-input" class="message-input" placeholder="输入消息..." rows="1"></textarea>
            <button id="send-button" class="send-button" disabled>
              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round">
                <line x1="22" y1="2" x2="11" y2="13"></line>
                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 模型设置弹窗 -->
  <div id="settings-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">设置</h3>
        <button class="close-button" id="close-settings">&times;</button>
      </div>

      <!-- 添加标签页选择器 -->
      <div class="tabs">
        <div class="tab active" data-tab="models">模型设置</div>
        <div class="tab" data-tab="commands">指令设置</div>
      </div>

      <!-- 模型设置标签页 -->
      <div class="tab-content active" id="models-tab">
        <div class="form-group">
          <label for="model-name">模型名称</label>
          <input type="text" id="model-name" placeholder="例如: GPT-3.5">
        </div>
        <div class="form-group">
          <label for="model-id">模型ID</label>
          <input type="text" id="model-id" placeholder="例如: gpt-3.5-turbo">
        </div>
        <div class="form-group">
          <label for="api-url">API地址</label>
          <input type="text" id="api-url" placeholder="例如: https://api.openai.com/v1/chat/completions">
        </div>
        <div class="form-group">
          <label for="api-key">API密钥</label>
          <input type="password" id="api-key" placeholder="输入您的API密钥">
        </div>
        <div class="form-group">
          <label for="system-prompt">系统提示词</label>
          <textarea id="system-prompt" placeholder="输入系统提示词，定义AI助手的行为和特性"></textarea>
        </div>
        <button id="add-model-btn" class="button">添加模型</button>

        <div class="model-list">
          <h4>已添加的模型</h4>
          <div id="model-list-container">
            <!-- 模型列表 -->
          </div>
        </div>
      </div>

      <!-- 指令设置标签页 -->
      <div class="tab-content" id="commands-tab">
        <div class="form-group">
          <label for="command-name">指令名称</label>
          <input type="text" id="command-name" placeholder="例如: AI总结">
        </div>
        <div class="form-group">
          <label for="command-code">指令代码</label>
          <input type="text" id="command-code" placeholder="例如: ai-summary">
        </div>
        <div class="form-group">
          <label for="command-description">指令描述</label>
          <input type="text" id="command-description" placeholder="例如: AI总结文本内容">
        </div>
        <div class="form-group">
          <label for="command-prompt">系统提示词</label>
          <textarea id="command-prompt" placeholder="输入系统提示词，定义AI指令的行为"></textarea>
        </div>
        <div class="form-help">
          <p>创建指令后，可以通过选中文本并呼出uTools使用您的自定义指令</p>
        </div>
        <button id="add-command-btn" class="button">添加指令</button>

        <div class="command-list">
          <h4>自定义指令列表</h4>
          <div id="command-list-container">
            <!-- 指令列表 -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 确认对话框 -->
  <div id="confirm-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">确认删除</h3>
        <button class="close-button" id="close-confirm">&times;</button>
      </div>
      <div class="modal-body">
        <p id="confirm-message">确定要删除这个模型吗？</p>
      </div>
      <div class="modal-footer">
        <button id="confirm-cancel" class="button button-secondary">取消</button>
        <button id="confirm-ok" class="button">确定</button>
      </div>
    </div>
  </div>

  <!-- 快捷键模态框容器 -->
  <div id="shortcuts-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">快捷键</h3>
        <button class="close-button" id="close-shortcuts">&times;</button>
      </div>
      <div class="modal-body">
        <div class="shortcuts-list">
          <div class="shortcut-item">
            <div class="shortcut-keys">
              <kbd>Ctrl</kbd> + <kbd>N</kbd>
            </div>
            <div class="shortcut-description">新建对话</div>
          </div>
          <div class="shortcut-item">
            <div class="shortcut-keys">
              <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd>
            </div>
            <div class="shortcut-description">切换到下一个模型</div>
          </div>
          <div class="shortcut-item">
            <div class="shortcut-keys">
              <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd>
            </div>
            <div class="shortcut-description">打开模型选择器</div>
          </div>
          <div class="shortcut-item">
            <div class="shortcut-keys">
              <kbd>Enter</kbd>
            </div>
            <div class="shortcut-description">发送消息</div>
          </div>
          <div class="shortcut-item">
            <div class="shortcut-keys">
              <kbd>Shift</kbd> + <kbd>Enter</kbd>
            </div>
            <div class="shortcut-description">换行</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="modelManager.js"></script>
  <script src="uiUtils.js"></script>
  <script src="chatManager.js"></script>
  <script src="notificationManager.js"></script>
  <script src="commandManager.js"></script>
  <script src="eventHandlers.js"></script>
  <script src="index.js"></script>
</body>

</html>